<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>捐款日志</title>

</head>


<body>
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <div id="app">
        <el-row>
            <el-col :span="4">
                <el-input v-model="userId" placeholder="对用户ID检索"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button @click="uh">查询</el-button>
            </el-col>


        </el-row>

        <h2 style="text-align: center;">捐款日志</h2>

        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="捐款记录" name="donation">
                <el-table :data="donationRecords" style="width: 100%">
                    <el-table-column prop="donationRecordsId" label="捐款单号"></el-table-column>
                    <el-table-column prop="userId" label="捐款人"></el-table-column>
                    <el-table-column prop="donationId" label="募捐对象"></el-table-column>
                    <el-table-column label="捐款时间" prop="donationTime" sortable>
                        <template slot-scope="scope">
                            {{ calculateCompletion(scope.row.donationTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="donationAmount" label="捐款金额"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleOperation(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'donation',
                    donationRecords: [],
                    userId: '',
                    List: [],

                };
            },
            methods: {
                //查找
                uh() {
                    if (this.userId === "") {
                        console.log(this.donationList = this.List);
                        return this.donationList = this.List; // 不进行筛选
                    }
                    this.donationRecords = this.List;
                    this.donationRecords = this.donationRecords.filter(item => {
                        if (typeof item.userId === 'number' && !isNaN(parseInt(this.userId))) { // 判断类型是否相同
                            return item.userId === parseInt(this.userId); // 判断值是否相等
                        } else {
                            return false; // 类型不同或转换失败，直接返回false
                        }
                    });
                    console.log('筛选后的数据：', this.donationRecords);
                },
                //捐款
                fetchDonationRecords() {
                    axios.get('http://localhost:8888/api/money/donationRecords')
                        .then(response => {
                            console.log(response.data);
                            this.donationRecords = response.data.data;
                            this.List = response.data.data;
                            this.donationRecords = this.List;
                            console.log(this.donationRecords);

                        })
                        .catch(error => {
                            console.error('Error fetching donation records', error);
                        });
                },
                //时间
                calculateCompletion(deadline) {
                    const timestamp = deadline;
                    const date = new Date(timestamp);
                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                    return formattedDate;
                },

            },
            mounted() {
                // 在页面加载后获取捐款记录数据
                this.fetchDonationRecords();
            }
        });
    </script>
</body>

</html>